<template>
  <el-card class="box-card" style="width: 100%">
    <div slot="header" class="clearfix" style="width: 100%">
      <span>面样式</span>
      <el-button style="float:right; padding: 3px 0" type="text"  @click="restoreDefault">恢复默认</el-button>
      <el-button type="primary" style="float: right; padding: 3px 10px" @click="changeStyle">提交</el-button>
    </div>
    <div>
      <div>
        填充-----颜色：
        <el-color-picker
                v-model="cstyleobject.cfillcolor"
                :predefine="predefinecolors" size="small">
        </el-color-picker>
      </div>

      <div>
        填充-透明度：
        <el-input-number style="width: 200px" v-model="cstyleobject.cfillopacity" :precision="2" :min="0" :step="0.01" :max="1"></el-input-number>
      </div>

      <div>
        轮廓-----颜色：
        <el-color-picker
                v-model="cstyleobject.cbordercolor"
                :predefine="predefinecolors" size="small">
        </el-color-picker>
      </div>

      <div>
        轮廓-透明度：
        <el-input-number style="width: 200px" v-model="cstyleobject.cborderopacity" :precision="2" :min="0" :step="0.01" :max="1"></el-input-number>
      </div>

      <div>
        轮廓----线宽：
        <el-input-number style="width: 200px" v-model="cstyleobject.clinewidth" :min="0" :step="1"></el-input-number>
      </div>

      <div>
        最小显示比例：
        <el-input style="width: 200px" v-model="cstyleobject.cminscale">
          <template slot="prepend">1:</template>
        </el-input>
      </div>

      <div>
        最大显示比例：
        <el-input style="width: 200px" v-model="cstyleobject.cmaxscale">
          <template slot="prepend">1:</template>
        </el-input>
      </div>

    </div>
  </el-card>
</template>

<script>
    export default {
        name: "polygonstyler",
        props:{
          cstyleobject:Object,
        },
      data(){
        return{
          predefinecolors: [
            '#ff4500',
            '#ff8c00',
            '#ffd700',
            '#90ee90',
            '#00ced1',
            '#1e90ff',
            '#c71585'
          ],

        }
      },
        methods:{
          //样式面板恢复默认
          restoreDefault(){
            this.cstyleobject.cfillcolor = '#95989A';
            this.cstyleobject.cfillopacity = 1;
            this.cstyleobject.cbordercolor = '#95989A';
            this.cstyleobject.cborderopacity = 1;
            this.cstyleobject.clinewidth = 2;
            this.cstyleobject.cminscale = '500000';
            this.cstyleobject.cmaxscale ='0';
            /*this.cstyleobject.cstylestring = `
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#95989A</CssParameter>
              <CssParameter name="fill-opacity">1</CssParameter>
            </Fill>
            <Stroke>
              <CssParameter name="stroke-opacity">1</CssParameter>
              <CssParameter name="stroke">#95989A</CssParameter>
              <CssParameter name="stroke-width">2</CssParameter>
            </Stroke>
          </PolygonSymbolizer>`;*/
          },
          changeStyle(){
          /*  this.cstyleobject.cstylestring  =`
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">`+this.cstyleobject.cfillcolor+`</CssParameter>
              <CssParameter name="fill-opacity">`+this.cstyleobject.cfillopacity+`</CssParameter>
            </Fill>
            <Stroke>
              <CssParameter name="stroke-opacity">`+this.cstyleobject.cborderopacity+`</CssParameter>
              <CssParameter name="stroke">`+this.cstyleobject.cbordercolor+`</CssParameter>
              <CssParameter name="stroke-width">`+this.cstyleobject.clinewidth+`</CssParameter>
            </Stroke>
          </PolygonSymbolizer>`;*/
            this.$emit('changePGStyle')
          }


        }
    }
</script>

<style scoped>

</style>
